<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <p>{{ count }}</p>
        <p>{{ bool }}</p>
    </div>
</body>
<script>
    // 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少


    // 所谓虚拟DOM => 就是使用对象和数组的形式,对挂载元素中的节点进行描述(参照节点树)
    /* vDom1 = {
        tag:"div",
        elm:div#app,
        attrs:{
            id:"#app",
            class:"",
            title:"",
            "data-id":"xx",
        },
        children:[
            {tag:"p",elm:p,attrs:{},children:[{tag:"",attrs:{},elm:textNode,text:"Hello Vue"}]},
            {tag:"p",elm:p,attrs:{},children:[{tag:"",attrs:{},elm:textNode,text: 200}]},
            {tag:"p",elm:p,attrs:{},children:[{tag:"",attrs:{},elm:textNode,text: true}]},
        ],
    } */
    // 初始化渲染 => 会根据模板生成第一个虚拟DOM, 没有其他虚拟DOM对象 => 根据虚拟dom解析得到真实dom,渲染到目标元素


    // 假如数据发生改变  count => 200
    /* vDom2 = {
        tag:"div",
        elm:div#app,
        attrs:{
            id:"#app",
            class:"",
            title:"",
            "data-id":"xx",
        },
        children:[
            {tag:"p",elm:p,attrs:{},children:[{tag:"",attrs:{},elm:textNode,text:"Hello Vue"}]},
            {tag:"p",elm:p,attrs:{},children:[{tag:"",attrs:{},elm:textNode,text: 200}]},
            {tag:"p",elm:p,attrs:{},children:[{tag:"",attrs:{},elm:textNode,text: true}]},
        ],
    } */
    // 数据发生改变 会生成新的虚拟DOM, 两个虚拟DOM进行对比(Vue diff算法)  =>，Vue 能够智能地计算出最少需要重新渲染多少组件/元素


    var vm = new Vue({
        el: '#app', 
        data:{   
            message:"Hello Vue",
            count:100,
            bool:true,
        }
    })
    console.log(vm);

    setTimeout(()=>{
        vm.count = 200;
    },2000)

</script>
</html>